class scatterplot {
    constructor(svg_id) {
        this.width = 613
        this.height = 600
        this.svg = d3.select('#' + svg_id)
            .attr("width", this.width)
            .attr("height", this.height)
            .attr("viewBox", [0,0, this.width, this.height])
    }

    clear() {
        this.svg.selectAll("*").remove()
    }

    vis(data, selected_list) {
        const marginTop = 10;
        const marginRight = 10;
        const marginBottom = 20;
        const marginLeft = 40;
        const r = 1.8
        const inset = 2 * r
        const insetLeft = inset
        const insetRight = inset
        const insetTop = inset
        const insetBottom = inset
        const xRange = [marginLeft + insetLeft, this.width - marginRight - insetRight]
        const yRange = [this.height - marginBottom - insetBottom, marginTop + insetTop]
        const xLabel = '?', yLabel = '??'

        const X = d3.map(data, d=>d.x);
        const Y = d3.map(data, d=>d.y);
        const T = d3.map(data, d=>d.id);
        const I = d3.range(X.length).filter(i => !isNaN(X[i]) && !isNaN(Y[i]));

        // Compute default domains.
        const xDomain = d3.extent(X);
        const yDomain = d3.extent(Y);

        // Construct scales and axes.
        const xScale = d3.scaleLinear(xDomain, xRange);
        const yScale = d3.scaleLinear(yDomain, yRange);
        const xAxis = d3.axisBottom(xScale).ticks(this.width / 80);
        const yAxis = d3.axisLeft(yScale).ticks(this.height / 50);

        this.svg.append("g")
            .attr("transform", `translate(0,${this.height - marginBottom})`)
            .call(xAxis)
            .call(g => g.select(".domain").remove())
            .call(g => g.selectAll(".tick line").clone()
                .attr("y2", marginTop + marginBottom - this.height)
                .attr("stroke-opacity", 0.1))
            .call(g => g.append("text")
                .attr("x", this.width)
                .attr("y", marginBottom - 4)
                .attr("fill", "currentColor")
                .attr("text-anchor", "end")
                .text(xLabel));

        this.svg.append("g")
            .attr("transform", `translate(${marginLeft},0)`)
            .call(yAxis)
            .call(g => g.select(".domain").remove())
            .call(g => g.selectAll(".tick line").clone()
                .attr("x2", this.width - marginLeft - marginRight)
                .attr("stroke-opacity", 0.1))
            .call(g => g.append("text")
                .attr("x", -marginLeft)
                .attr("y", 10)
                .attr("fill", "currentColor")
                .attr("text-anchor", "start")
                .text(yLabel));

        let points = this.svg.append("g")
            .attr("fill", '#5878a3')
            .attr("stroke", '#cdcdcd')
            .attr("stroke-width", 0.3)
            .selectAll("circle")
            .data(I)
            // .enter()
            // .append("circle")
            .join("circle")
            .attr("cx", i => xScale(X[i]))
            .attr("cy", i => yScale(Y[i]))
            .attr("r", r)
            // .on("selected", function (ev) {
            //     console.log(ev)
            //     this.attr('fill', d => {
            //         if (d.id in ev.detial.selected)
            //             return '#ff0000'
            //         else
            //             return '#5878a3'
            //     })
            // })
            .append("title")
            .text(i => "id: " + data[i].id)

        // this.svg
        //     .selectAll("circle")
        //     .on("selected", (d, i, g) => {
        //         console.log()
        //         g[i].attr('fill', () => {
        //             if (d.id in selected_list)
        //                 return '#ff0000'
        //             else
        //                 return '#5878a3'
        //         })
        //     })
            
        setInterval(() => {
            console.log(selected_list)
            this.svg.selectAll('circle')
                .attr("fill", i => {
                    if (selected_list.indexOf(data[i].id) != -1)
                        return '#ff0000'
                    else
                        return '#5878a3'
                })
        }, 32)


        // let lasso = d3.lasso()
        //     .closePathDistance(1000)
        //     .closePathSelect(true)
        //     .hoverSelect(false)
        //     .items(points)
        //     .targetArea(this.svg)
        //     .on("start", () => lasso.items().classed("selected", false))
        //     .on("draw", () => {
        //         lasso.possibleItems().classed("selected", true)
        //         lasso.notPossibleItems().classed("selected", false)
        //     })
        //     .on("end", () => {
        //         lasso.selectedItems().classed("selected", true)
        //         lasso.notSelectedItems().classed("selected", false)
        //     });

        // this.svg
        //     .call(lasso)

    }
}